<template>
  <div style="padding-bottom: 60px;">
    <img :src="AdUrl" style="width: 100%"/>
    <div style="background: white;padding-bottom: 0px;padding-top: 0px">
      <product-feature-list :features="features"></product-feature-list>
    </div>
    <div style="margin-top: 10px;display: flex;flex-direction: column;background: white">
      <div class="subtitle">
        计息规则
      </div>
      <span class="content" style="color: #E2976F">实际取出利率按存入日公布的产品利率为准</span>
      <span class="content" style="color: #969AA3">
          利息 = 取出金额 × 存入日产品相应档次利率 / 360 × 实际持有天数
      </span>
      <span class="content" style="color: #42578E;font-size: 16px">存的越久，利率越高</span>
      <div style=";overflow: hidden;">
        <v-chart :data="rateData" style="width: 100%">
          <v-scale x :tick-count="5" :max="10"/>
          <v-line :colors="gradient"/>
          <v-area shape="smooth" :colors="gradient"/>
        </v-chart>
        <!--<v-guide type="tag" :options="tag" />-->
      </div>
      <span class="content" style="color: #969AA3">
          阶梯年利率的期限按照对年对月对日规则计算<br>
          如2018年5月25日存入，2019年5月25日期满一年
      </span>
      <span class="content" style="color: #969AA3; padding: 0px">
        <img :src="IconDetail" style="width: 18px; height: 18px;"/><span style="position: relative;top:-3px;left: 3px">示例：</span>
      </span>
      <span class="content" style="color: #969AA3;padding-right: 10px;margin-top: 3px">
        若2018年5月5日存入12万元，存入98天后取出其中10万元<br>
        取出利率按存入日公布的3-6个月档利率为<span style="color: #E2976F">4.30%</span><br>
        取出部分的利息=100,000.00*(4.30%/360)*90=<span style="color: #E2976F">1,170.56</span>元<br>
        取出的本息和=100,000.00+1,170.56=<span style="color: #E2976F">101,170.56</span>元
      </span>
    </div>

    <div style="margin-top: 10px;display: flex;flex-direction: column;background: white">
      <div class="subtitle">
        存取规则
      </div>

      <div style="margin-left: 10px">
        <ul style="color: #969AA3;list-style-type: disc;margin-left: 20px;font-size: 14px">
          <li>50元起存，存入金额无上限，当日起息</li>
          <li>支持部分或全部金额提前支取，不限次数，取出本金及利息实时到账，5年到期本息取出至微众卡</li>
          <li>取出时，采取“后进先出”的规则，即按存入最近的时间往前逐笔取出，同时会结算取出金额的利息</li>
        </ul>
      </div>

      <span class="content" style="color: #969AA3; padding: 0px">
        <img :src="IconDetail" style="width: 18px; height: 18px;"/><span style="position: relative;top:-3px;left: 3px">取出示例：</span>
      </span>
      <span class="content" style="color: #969AA3;margin-top: 5px;padding-bottom: 5px">
        若2018年8月1日存入1万元，2019年9月1日存入一万元，之后取出1.5万元，则系统会将2018年9月1日存入的1万元，
        及2018年8月1日存入的1万元中的5千元合并取出，同时结算这1.5万元对应的利息。
      </span>
    </div>

    <x-button :gradients="['#F29360', '#F29360']"
              style="width: 100%;border-radius:0px;position: fixed;bottom: 0px;padding: 5px"
              @click.native="onSiphonIntoClick">
      立刻存入
    </x-button>
  </div>
</template>

<script>
  import { VChart, VGuide, VLine, VArea, VScale, XButton } from 'vux'
  import ProductFeatureList from '@/components/ProductFeatureList'
  import AdUrl from '@/assets/image/img_intelligent_ad.png'
  import Icon1Url from '@/assets/image/icon_bank_shell.svg'
  import Icon2Url from '@/assets/image/icon_bank_profit.svg'
  import Icon3Url from '@/assets/image/icon_bank_phone.svg'
  import IconDetail from '@/assets/icon/icon_detail.png'

  export default {
    name: 'IntelligentDepositDetail',
    components: {
      VChart,
      VGuide,
      VArea,
      VLine,
      VScale,
      XButton,
      ProductFeatureList
    },
    data () {
      return {
        AdUrl: AdUrl,
        IconDetail: IconDetail,
        features: [
          {'icon': Icon1Url, 'feature': '当日起息', 'subTitle': '节假日适用'},
          {'icon': Icon3Url, 'feature': '实时到账', 'subTitle': '不限额度'},
          {'icon': Icon2Url, 'feature': '安全保障', 'subTitle': '银行牌照'}
        ],
        product: {},
        gradient: [
          [0, '#F2C587'],
          [0.5, '#ED7973'],
          [1, '#8659AF']
        ],
        tag: {
          position: [2017, 30.12],
          content: '30.12',
          direct: 'tl',
          offsetY: -5,
          background: {
            fill: '#8659AF'
          },
          pointStyle: {
            fill: '#8659AF'
          }
        },
        rateData: [
          {'期限': '一个月', '利率': '2.60%'},
          {'期限': '三个月', '利率': '4.00%'},
          {'期限': '六个月', '利率': '4.30%'},
          {'期限': '一年', '利率': '4.50%'},
          {'期限': '五年', '利率': '4.50%'}
        ]
      }
    },
    created () {
      this.product = JSON.parse(decodeURIComponent(this.$route.query.product))
      this.$store.commit('setTitle', '智能存款+')
    },
    methods: {
      onSiphonIntoClick: function () {
        this.$router.push({path: '/intelligentDepositSiphonInto'})
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .subtitle {
    padding: 5px 10px;
    color: #42578E;
    font-size: 15px;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .subtitle::after {
    content: "";
    display: inline-block;
    width: 120%;
    height: 1px;
    left: -10px;
    bottom: -5px;
    background: #F8F8F8;
    position: relative;
  }

  .content {
    margin-left: 10px;
    margin-top: 10px;
    font-size: 14px;
  }
</style>
